import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';

class InputWidget extends StatefulWidget {
  final String hint;
  final String? title;
  final String? titleTip;
  final bool? obscureText;
  final bool? disabled;
  final bool? visible;
  final ValueChanged<String>? onChanged;
  final TextInputType? inputType;
  final TextEditingController? controller;
  final double? buttonRadio;
  final String? errorText;
  final int? maxLines;
  final double? height;
  final int? maxLength;
  final Color backgroundColor;
  final  List<TextInputFormatter>? inputFormatters;
   final Color? fontColor;
  final FocusNode? focusNode;
  const InputWidget({
    super.key,
    required this.hint,
    this.title,
    this.titleTip,
    this.onChanged,
    this.inputType,
    this.obscureText = false,
    this.visible = false,
    this.controller,
    this.disabled = false,
    this.buttonRadio = 6,
    this.errorText,
    this.maxLength,
    this.maxLines,
    this.height,
    this.inputFormatters,
    this.fontColor =AppColors.fontColor,
    this.focusNode,
    this.backgroundColor = AppColors.backgroundColorGreyBold,
  });

  @override
  State<InputWidget> createState() => _InputWidgetState();
}

class _InputWidgetState extends State<InputWidget> {
  bool _visible = false;

  @override
  void initState() {
    super.initState();
    _visible = widget.visible!;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        widget.title != null
            ? Padding(
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 8),
              child: Row(
                children: [
                  Text(
                    widget.title!,
                    style: TextStyle(
                      fontSize: 14.px,
                      color:
                          widget.disabled!
                              ? AppColors.backgroundColorBlack
                              : AppColors.backgroundColorBlack,
                    ),
                  ),
                  SizedBox(width: 5.px),
                  widget.titleTip == null
                      ? const Text('')
                      : Text(
                        widget.titleTip!,
                        style: TextStyle(
                          fontSize: 12.px,
                          color: AppColors.backgroundColorBlack,
                        ),
                      ),
                ],
              ),
            )
            : Container(),
        _input(),
        SizedBox(
          child:
              widget.errorText != null
                  ? Padding(
                    padding: EdgeInsets.only(
                      top: 8.px,
                      bottom: 4.px,
                      left: 24.px,
                    ),
                    child: Row(
                      children: [
                        ImageAssetWidget(
                          imageUrl: 'static/images/error_tip.png',
                          width: 14.px,
                          height: 14.px,
                          fit: BoxFit.fitWidth,
                          alignment: Alignment.topCenter,
                        ),
                        hiSpace(width: 4.px),
                        Text(
                          widget.errorText!,
                          style: TextStyle(
                            color: AppColors.fontColorError,
                            fontSize: 12.px,
                          ),
                        ),
                      ],
                    ),
                  )
                  : null,
        ),
      ],
    );
  }

  _input() {
    return Container(
      height: widget.height ?? 45.px,
      decoration: BoxDecoration(
        color: widget.backgroundColor,
        borderRadius: BorderRadius.circular(widget.buttonRadio!),
      ),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(21, 0, 0, 0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: TextField(
                focusNode: widget.focusNode,
                keyboardType: widget.inputType,
                onChanged: widget.onChanged,
                obscureText: _visible,
                enabled: !widget.disabled!,
                controller: widget.controller,
                maxLines: widget.maxLines ?? 1,
                maxLength: widget.maxLength ?? 30,
                inputFormatters: widget.inputFormatters,
                style: TextStyle(
                  fontSize: 14.px,
                  color:
                      widget.disabled!
                          ? widget.fontColor
                          : widget.fontColor,
                ),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(vertical: 14.px),
                  border: InputBorder.none,
                  counterText: '',
                  hintText: widget.hint,
                  hintStyle: const TextStyle(color: AppColors.fontColorGray99),
                  suffixIcon:
                      widget.obscureText == true
                          ? IconButton(
                            color: AppColors.fontColorGrey,
                            onPressed: _toggle,
                            iconSize: 18,
                            icon: ImageAssetWidget(
                              imageUrl:
                                  _visible
                                      ? 'static/images/visibility_off.png'
                                      : 'static/images/visibility.png',
                              width: 18.px,
                              height: 18.px,
                              fit: BoxFit.fitWidth,
                              alignment: Alignment.topCenter,
                            ),
                          )
                          : null,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _toggle() {
    setState(() {
      _visible = !_visible;
    });
  }
}
